<template>
    <div class="flex_col_start m5 p10 card" style="width: 300px;">
        <div class="flex_row_center">
            <label>ID:</label>
            <label class="ml5">{{ props.firmType.id }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>名称:</label>
            <label class="ml5">{{ props.firmType.name }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>版本:</label>
            <label class="ml5">{{ props.firmType.version }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>平台:</label>
            <label class="ml5">{{ props.firmType.target }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>类型:</label>
            <label class="ml5">{{ props.firmType.ty }}</label>
        </div>
        <div class="flex_row_center mt5">
            <label>描述:</label>
            <label class="ml5">{{ props.firmType.description }}</label>
        </div>
        <div class="flex_row_center mt5">
            <el-button type="warning" @click="onClickDelete">删除</el-button>
            <el-button type="primary" @click="onClickDetail">详情</el-button>
            <el-button v-if="isAndroid()" @click="onClickDeviceInfo" type="info">设备信息</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { type TbFirmType } from '@/service/firm_type';


interface Props {
    firmType: TbFirmType
}

const props = defineProps<Props>();

const emit = defineEmits<{
    delete: [],
    detail: [],
}>();

function isAndroid() {
    return props.firmType.target == "Android";
}

function onClickDelete() {
    emit('delete');
}

function onClickDetail() {
    emit('detail');
}

function onClickDeviceInfo() {
    router.push({
        path: '/device',
        query: {
            id: props.firmType.id,
            name: props.firmType.name
        }
    });
}

</script>
